* {
  box-sizing: border-box;
}

html {
  // font-size: 13px;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: #333;
  background: #f1f1f1;
}

a {
  color: #999999;
  text-decoration: none;
}

// text
@each $var in (left, center, right) {
  .text-#{$var} {
    text-align: $var !important;
  }
}

// color
$colors: (
  'primary': #db9e3f,
  'white': #ffffff,
  'gray': #999,
  'gray-1': #666,
  'blue': #191a31,
  'black': #000,
);

// bg-color
@each $colorKey, $color in $colors {
  .bg-#{$colorKey} {
    background: $color;
  }
}

// text-color
@each $colorKey, $color in $colors {
  .text-#{$colorKey} {
    color: $color;
  }
}

// font-size
$base-font-size: 1rem;
$font-sizes: (
  // 10px 12px 13px 14px 16px,
    xs: 0.8333,
  sm: 1,
  md: 1.0833,
  lg: 1.1667,
  xl: 1.3333
);

@each $sizeKey, $size in $font-sizes {
  .fs-#{$sizeKey} {
    font-size: $size * $base-font-size;
  }
}

// flex
.flex {
  display: flex;
}

.flex-1 {
  flex: 1;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

// width height
.w-100 {
  width: 100%;
}

.h-100 {
  height: 100%;
}

$flex-jc: (
  start: flex-start,
  end: flex-end,
  center: center,
  between: space-between,
  around: space-around,
);

@each $key, $value in $flex-jc {
  .jc-#{$key} {
    justify-content: $value;
  }
}

$flex-ai: (
  start: flex-start,
  end: flex-end,
  center: center,
  stretch: stretch,
);

@each $key, $value in $flex-ai {
  .ai-#{$key} {
    align-items: $value;
  }
}

// spacing
$spacing-types: (
  m: margin,
  p: padding,
);
$spacing-directions: (
  t: top,
  r: right,
  b: bottom,
  l: left,
);
$spacing-base-size: 1rem;
$spacing-sizes: (
  0: 0,
  1: 0.25,
  2: 0.5,
  3: 1,
  4: 1.5,
  5: 3,
);

@each $typeKey, $typeValue in $spacing-types {
  // m-1  四个方向
  @each $sizeKey, $size in $spacing-sizes {
    .#{$typeKey}-#{$sizeKey} {
      #{$typeValue}: $size * $spacing-base-size;
    }
  }

  @each $sizeKey, $size in $spacing-sizes {
    // margin x方向
    .#{$typeKey}x-#{$sizeKey} {
      #{$typeValue}-left: $size * $spacing-base-size;
      #{$typeValue}-right: $size * $spacing-base-size;
    }

    // margin y方向
    .#{$typeKey}y-#{$sizeKey} {
      #{$typeValue}-top: $size * $spacing-base-size;
      #{$typeValue}-bottom: $size * $spacing-base-size;
    }
  }

  // mt-1 单方向
  @each $directionsKey, $value in $spacing-directions {
    @each $sizeKey, $size in $spacing-sizes {
      .#{$typeKey}#{$directionsKey}-#{$sizeKey} {
        #{$typeValue}-#{$value}: $size * $spacing-base-size;
      }
    }
  }
}

// 雪碧图
.sprite {
  background: url('./assets/index.png') no-repeat 0 0;
  background-size: 31.25rem;
  display: inline-block;
  &.sprite-1 {
    width: 1.9167rem;
    height: 1.6667rem;
    background-position: 63.546% 15.517%;
  }
  &.sprite-2 {
    width: 1.9167rem;
    height: 1.6667rem;
    background-position: 90.483% 15.614%;
  }
  &.sprite-3 {
    width: 1.5833rem;
    height: 1.8333rem;
    background-position: 36.746% 0.924%;
  }
  &.sprite-4 {
    width: 1.6667rem;
    height: 1.6667rem;
    background-position: 10.408% 15.517%;
  }
  &.sprite-5 {
    width: 1.6667rem;
    height: 1.75rem;
    background-position: 89.733% 1.266%;
  }
  &.sprite-6 {
    width: 2rem;
    height: 1.6667rem;
    background-position: 36.467% 15.287%;
  }
  &.sprite-7 {
    width: 2.5833rem;
    height: 2.0833rem;
    background-position: 9.302% 0.813%;
  }
  &.sprite-8 {
    width: 2rem;
    height: 2rem;
    background-position: 63.3% 0.927%;
  }
}
